<template>
	<view class="box">
		<view class="u-page">
			<!-- login -->
			<view class="login">
				<view class="left">
					<u--text text="立即登录" color="white"></u--text>
					<u--text text="会员级别" color="white" size=14></u--text>
				</view>
				<view class="right">
					<u-avatar src="/static/personal/avatar.png" size="56"></u-avatar>
					<u--text text="我的积分" color="white" size=12 align="center" margin="30rpx auto 10rpx auto"></u--text>
					<u--text text="0" color="white" size=34 align="center" lineHeight="1em"></u--text>
				</view>
			</view>
			<!-- merchant btn -->
			<view class="links merchant">
				<u-cell-group :border="false">
					<u-cell icon="/static/personal/merchant.png" title="商家管理" isLink="true" size="large"
						iconStyle="marginRight:20rpx" url="/pages/agent/agentCenter" rightIconStyle="color:white"></u-cell>
				</u-cell-group>
			</view>
			<!-- btns -->
			<view class="links">
				<u-cell-group :border="false">
					<u-cell icon="/static/personal/info.png" title="修改个人信息" isLink="true" size="large"
						iconStyle="marginRight:20rpx" url="/pages/user/updateInfo"></u-cell>
					<u-cell icon="/static/personal/order.png" title="我的订单" isLink="true" size="large"
						iconStyle="marginRight:20rpx" url="/pages/orders/orders"></u-cell>
					<u-cell icon="/static/personal/tickets.png" title="我的电子券" isLink="true" size="large"
						iconStyle="marginRight:20rpx" url="/pages/user/tickets"></u-cell>
					<u-cell icon="/static/personal/about.png" title="关于" isLink="true" size="large" :border="false"
						iconStyle="marginRight:20rpx"></u-cell>
				</u-cell-group>
			</view>
			<!-- login button -->
			<view class="loginBtn">
				点击登录
			</view>
		</view>

	</view>
</template>

<script>



</script>

<style scoped lang="scss">
page,
.box {
	height: 100%;
}

.u-page {
	height: 100%;
	box-sizing: border-box;
	padding: 200rpx 40rpx;
	background: linear-gradient(180deg, #CDE1FD 0%, rgba(216, 216, 216, 0.00) 100%);
}

.login {
	background: linear-gradient(180deg, #3662EC 0%, #5855F1 100%);
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
	border-radius: 13px;
	padding: 20rpx 30rpx 20rpx 44rpx;
	color: white;
	display: flex;
	justify-content: space-between;

	.left {
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		::v-deep .u-text:nth-of-type(1) {
			align-items: flex-start;
		}

		::v-deep .u-text:nth-of-type(2) {
			align-items: flex-end;
		}

		.bottom {
			// margin-top: auto;
		}
	}

	.right {
		display: flex;
		flex-direction: column;
	}
}

.links {
	background-color: white;
	border-radius: 20rpx;
	box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.15);
	margin-top: 40rpx;

	&.merchant {
		background: linear-gradient(90deg, #E4C389 5%, #CBA46D 100%);

		::v-deep text {
			color: white !important;
		}
	}
}


.loginBtn {
	text-align: center;
	height: 100rpx;
	line-height: 100rpx;
	box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.15);
	background: #FFFFFF;
	border-radius: 10px;
	margin-top: 200rpx;
}
</style>
